export function createCountWrap() {
    return new Promise(async (resolve) => {

        let countWrap = document.createElement('div')
        countWrap.className = 'count-wrap animated fadeInDown'
        let top = () => {
            let topText = document.createElement('div')
            topText.className = 'count-wrap-top'
            topText.innerHTML = `
            <div style='margin-top:18px;font-size:18px;margin-left:21px;'>过去一年</div>
            <div style='margin-top:20px;margin-left:21px;margin-right: 21px;display:flex;justify-content:space-between;'>
                <div class='count-card'>
                    <div>档案排名</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>档案阅读次数</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>出勤率</div>
                    <div>--</div>
                </div>
            </div>
            <div style='margin-top:34px;margin-left:21px;margin-right: 21px;display:flex;justify-content:space-between'>
                <div class='count-card'>
                    <div>正式上课比率</div>
                    <div style='color:#AFAFAF'>体验课后正式购课的比率</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>体验学生人数</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>体验课评分</div>
                    <div>--</div>
                </div>
            </div>         
        `
            return topText
        }

        let middle = () => {
            let middleText = document.createElement('div')
            middleText.className = 'count-wrap-middle'
            middleText.innerHTML = `
            <div style='margin-top:18px;font-size:18px;margin-left:21px;'>全部期间</div>
            <div style='margin-top:20px;margin-left:21px;margin-right: 21px;display:flex;justify-content:space-between;'>
                <div class='count-card'>
                    <div>一共赚取</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>一共完成课时</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>学生总数</div>
                    <div>--</div>
                </div>
            </div>
            <div style='margin-top:34px;margin-left:21px;margin-right: 21px;display:flex;justify-content:space-between'>
                <div class='count-card'>
                    <div>平均评分</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>评语数</div>
                    <div>--</div>
                </div>
                <div class='count-card'>
                    <div>出勤率</div>
                    <div>--</div>
                </div>
            </div>         
        `
            return middleText
        }

        let bottom = () => {
            let bottomText = document.createElement('div')
            bottomText.className = 'count-bottom-wrap'
            bottomText.innerHTML = `
            <div class='income-dialog-open' style='margin-top:75px;font-size:18px;margin-left:21px;width: 213px;height: 42px;background: #4580FE;border-radius: 3px;display:flex;align-items:center;justify-content:center;color:white'>下载收入报告</div>
            <div style='display:flex;flex-direction:column;    margin-left: 21px;margin-right: 21px;margin-top: 16px;background: #FFFFFF;border-radius: 6px;box-shadow: 1px 1px 5px 0px #e4e4e4;'>
                <div class='bank'>
                    <svg style="width: 32px;height:28px;margin-right:15px" class='' aria-hidden="true">
                        <use xlink:href="#icon-weibiaoti-1"></use>
                    </svg>
                    <div>$56</div>
                </div>
                <div id='main' style="width: 100%;height:400px;"></div>
            </div>
        `
            return bottomText
        }

        countWrap.appendChild(top())
        countWrap.appendChild(middle())
        countWrap.appendChild(bottom())

        let picture = () => {
            let chartDom = document.getElementById('main');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [10, 20, 30, 40, 50, 60],
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);
        }

        let incomeListener = () => {
            $('.income-dialog-open')[0].onclick = () => {
                $("#mask").show();
                $("#mask")[0].style.zIndex = 20;
                createIncomeDialog()
            }
        }

        $('.body')[0].appendChild(countWrap)

        picture()
        incomeListener()

        setTimeout(() => {
            $('.count-wrap')[0].style.opacity = 1
            resolve('ok')
        })

    })
}

let createIncomeDialog = () => {
    let incomeDialog = document.createElement('div')
    incomeDialog.className = 'income-dialog'
    incomeDialog.innerHTML = `
        <div style='margin-left:36px;margin-top:21px;display: flex;align-items: center'>
            <span>下载收入报告的日期</span>
            <select style='margin-left:9px'>
                <option>2021年</option>
                <option>2020年</option>
                <option>2019年</option>
            </select>
            <i class='iconfont icon-chahao closes' style='color: #BBBBBB;margin-left: 215px;cursor:pointer'></i>
        </div>
        <div style='margin-top:28px;margin-left:36px'>开始</div>
        <select class='income-select' style='margin-left:36px;margin-top:10px;width:80%'>
            <option>1月</option>
            <option>2月</option>
            <option>3月</option>
        </select>
        <div style='margin-top:17px;margin-left:36px'>结束</div>
        <select class='income-select' style='margin-left:36px;margin-top:15px;width:80%'>
            <option>1月</option>
            <option>2月</option>
            <option>3月</option>
        </select>
        <div class='income-download' style=''>下载</div>
    `
    $('.body')[0].appendChild(incomeDialog)

    $('.closes')[0].onclick = () => {
        $("#mask").hide();
        $("#mask")[0].style.zIndex = -1;
        $('.income-dialog')[0] && $('.income-dialog')[0].remove()
    }
}